<template>
  <el-container class="layout-container-demo">
    <el-header>
      <div class="logo">
        <el-image src="/src/assets/vue.svg"></el-image>
        <span>JONE</span>
      </div>
      <div class="toolbar">
        <span>{{ userInfo.name }}</span>
        <el-dropdown>
          <el-icon><Setting /></el-icon>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>View</el-dropdown-item>
              <el-dropdown-item>Add</el-dropdown-item>
              <el-dropdown-item>Delete</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-scrollbar>
          <el-menu :router="true">
              <div v-for="(item) in menu">
                <el-sub-menu :index="item.path" v-if="item.children.length>0">
                  <template #title>
                    <component :is="item.icon" class="icon"></component>
                    {{ item.name }}
                  </template>
                  <div v-for="(child) in item.children">
                    <el-menu-item-group v-if="child.children.length>0">
                      <template #title>
                        <component :is="child.icon" class="icon"></component>
                        {{ child.name}}
                      </template>
                      <div v-for="child2 in child.children">
                        <el-menu-item :index="child2.path">
                          <component :is="child2.icon" class="icon"></component>
                          {{ child2.name }}
                        </el-menu-item>
                      </div>
                    </el-menu-item-group>
                    <el-menu-item :index="child.path" v-else>
                      <component :is="child.icon" class="icon"></component>
                      {{ child.name}}
                    </el-menu-item>
                  </div>
                </el-sub-menu>
                <el-menu-item :index="item.path" v-else>
                  <component :is="item.icon" style="width: 15px; height: 15px; padding-right: 10px"></component>
                  {{ item.name }}
                </el-menu-item>
              </div>
          </el-menu>
        </el-scrollbar>
      </el-aside>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
    <el-footer>京ICP</el-footer>
  </el-container>
</template>

<script lang="ts" setup>
import {getMenu} from "./login.ts";

const userInfo = {
  date: '2016-05-02',
  name: 'Tom',
  address: 'No. 189, Grove St, Los Angeles',
}

const menu=getMenu(0);
console.log(menu)

</script>

<style scoped>
.layout-container-demo {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 99%;
  height: 99vh;
}
.layout-container-demo .el-header {
  width: 100%;
  height: 50px;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
  text-align-last: justify;
}

.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  height: 100%;
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
  height: 100%;
}
.layout-container-demo .el-footer {
  padding-top: 5px;
  background-color: var(--el-color-primary-light-7);
  height: 30px;
}
.layout-container-demo .logo{
  display: inline-flex;
  width: 85%;
  height: 20px;
  margin: 5px;
  text-align: left;
  position: relative;
  transform: translate(0,30%);
}
.layout-container-demo .logo .el-image {
  width: 30px;
  height: 30px;
  position: relative;
  transform: translate(0,-15%);
}
.layout-container-demo .logo span {
  margin-left: 10px;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  width: 14%;
  height: 20px;
  justify-content: flex-end;
  position: relative;
  transform: translate(0,20%);
}
.layout-container-demo .toolbar .el-icon{
  display: inline-flex;
  position: relative;
  transform: translate(0,30%);
  margin-left: 10px;
}
.layout-container-demo .icon{
  width: 15px;
  height: 15px;
  padding-right: 10px
}
</style>

